<template>
  <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>
        <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="角色名称" v-model="listQuery.name">
        </el-input>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </div>
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column align="center" label="角色名称" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column width="250" align="center" label="描述">
          <template slot-scope="scope">
            <span>{{scope.row.intro}}</span>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="230"  class-name="small-padding">
          <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>          
          <el-button size="mini" type="danger" @click="handleModifyStatus(scope.row,'delete')">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="角色名称" prop="title">
          <el-input v-model="temp.title"></el-input>
        </el-form-item>         
        <el-form-item label="描述" prop="intro">
          <el-input v-model="temp.intro"  :rows="3" type="textarea"></el-input>
        </el-form-item>                 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import { fetchList, deleteRecord, updateRecord } from "../../api/role";
export default {
  directives: {
    waves
  },
  data() {
    return {
      submiting: false,
      isEditing: false,
      listLoading: false,
      dialogFormVisible: false,
      dialogVoteListVisible: false,
      dialogVoteLoading: false,
      list: null,
      total: null,
      rules: {
        title: [{ required: true, message: "名称不能为空", trigger: "change" }]
      },
      temp: {},
      listQuery: {
        page: 1,
        limit: 10,
        username: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    showVoteList(row) {
      let id;
      if (row) {
        this.currentPlayerId = id = row.id;
      } else {
        id = this.currentPlayerId;
      }
      this.dialogVoteListVisible = true;
      this.dialogVoteLoading = true;
      fetchVoteList({
        player_id: id,
        ...this.voteListQuery
      })
        .then(({ data: { info } }) => {
          this.voteList = info.rows;
          this.voteTotal = parseInt(info.count);
          this.dialogVoteLoading = false;
        })
        .catch(() => {
          this.dialogVoteLoading = false;
        });
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          updateRecord(this.temp)
            .then(() => {
              this.submiting = false;
              this.dialogFormVisible = false;
              if (this.isEditing) {
                for (var i = 0; i < this.list.length; i++) {
                  if (this.list[i].id == this.temp.id) {
                    this.list[i] = Object.assign(this.list[i],this.temp);
                    break;
                  }
                }
              } else {
                this.getList();
              }
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000
              });
            })
            .catch(() => {
              this.submiting = 0;
              this.$message({
                type: "warning",
                message: "操作失败!"
              });
            });
        }
      });
    },
    handleUpdate(row) {
      if (row) {
        this.temp = Object.assign({}, row); // copy obj
        this.isEditing = true;
      } else {
        this.temp = {};
        this.isEditing = false;
      }
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleModifyStatus(row, type) {
      if (type == "stop") {
        this.$confirm("确认要停用该账户吗？", "平台提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            frozenRecord({
              id: row.id
            })
              .then(() => {
                row.status = 1;
                this.$message({
                  type: "success",
                  message: "停用成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "warning",
                  message: "停用失败!"
                });
              });
          })
          .catch(() => {});
      } else if (type == "start") {
        this.$confirm("确认要启用此账户吗？", "平台提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            unFrozenRecord({
              id: row.id
            })
              .then(() => {
                row.status = 0;
                this.$message({
                  type: "success",
                  message: "启用成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "warning",
                  message: "启用失败!"
                });
              });
          })
          .catch(() => {});
      } else if (type == "delete") {
        this.$confirm("确认要删除此账户吗？", "平台提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteRecord({
              id: row.id
            })
              .then(() => {
                this.getList();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "warning",
                  message: "删除失败"
                });
              });
          })
          .catch(() => {});
      } else if (type == "edit") {
      }
    },
    handleVoteSizeChange(val) {
      this.voteListQuery.limit = val;
      this.showVoteList();
    },
    handleVoteCurrentChange(val) {
      this.voteListQuery.page = val;
      this.showVoteList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(res => {
        if (res.data.errcode == 0) {
          this.list = res.data.info.rows;
          this.total = parseInt(res.data.info.count);
        }
        this.listLoading = false;
      });
    }
  }
};
</script>
